<template>
	 <!-- // @tap="click" -->
	 
	 
  <view
    class="search-content ss-flex ss-col-center ss-row-between"
  
    :style="[
      {
        borderRadius: radius + 'px',
        background: elBackground,
        height: height + 'px',
        width: width,
      },
    ]"
    :class="[{ 'border-content': navbar }]"
  >
    <view class="ss-flex ss-col-center" v-if="navbar">
      <view class="search-icon _icon-search ss-m-l-10" :style="[{ color: props.iconColor }]"></view>
      <view class="search-input ss-flex-1 ss-line-1" :style="[{ color: fontColor, width: width }]">
        {{ placeholder }}
      </view>
    </view>
	<view class="ss-flex ss-col-center">
	  
	   <view  class="search-input ss-flex-1 " :style="[{ color: fontColor}]" @tap="filterTap">
	
			<!-- <view class="fui-filter__item" > -->
				<!-- <text>{{state.procurementTypename}}</text> -->
				<!-- <view class="fui-filter__icon" >				 				 -->
				    	<!-- <fui-icon  name="turningdown" :size="26"></fui-icon> -->
				<!-- </view> -->
			<!-- </view> -->
			<image  :src="state.procurementType == 0 ?  state.imagedr:state.Imagecr"  mode="aspectFill" class="dimag"></image>
			
	   </view>
	   
	   <uni-drawer  ref="showLeft" mode="left" :width="180" >
	   					<view class="drawmargin">
	   						
							<uni-list v-for=" item , index in state.options">
			 			    	<uni-list-item showArrow :title="item.pickupTimeTypeName"clickable @click="onClick(item)"  :note="item.description"/>				
							</uni-list>
	   					</view>
	   </uni-drawer>
	 </view>
	
				 
   <uni-search-bar
       class="ss-flex-1"
      :radius="data.borderRadius"
      :placeholder="data.placeholder"
      cancelButton="none"
      clearButton="none"
      @confirm="onSearch"
      v-model="state.searchVal"
    />
    <view class="keyword-link ss-flex">
      <view v-for="(item, index) in data.hotKeywords" :key="index">
		  
        <view
          class="ss-m-r-16 textClass"
		  @tap="onSearch"
          >{{ item }}</view
        >
      </view>
    </view>
    <view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
      <button
        class="ss-reset-button keyword-btn"
        v-for="(item, index) in data.hotKeywords"
        :key="index"
        :style="[{ color: data.textColor, marginRight: '10rpx' }]"
      >
        {{ item }}
      </button>
    </view>
	
  </view>
</template>

<script setup>
  /**
   * 基础组件 - 搜索栏
   *
   * @property {String} elBackground 			- 输入框背景色
   * @property {String} iconColor 			- 图标颜色
   * @property {String} fontColor 		  	- 字体颜色
   * @property {Number} placeholder 			- 默认placeholder
   * @property {Number} topRadius 			- 组件上圆角
   * @property {Number} bottomRadius 			- 组件下圆角
   *
   * @slot keywords							- 关键字
   * @event {Function} click 					- 点击组件时触发
   */

  import { ref,computed, reactive,onMounted } from 'vue';
  import sheep from '@/sheep';
  import $store from '@/sheep/store';
   import OrderApi from '@/sheep/api/trade/order';
  const ddmRange = ref(null)
  
  const popup = ref(null)
  const showLeft = ref(null)
  // 组件数据
  const state = reactive({
    searchVal: '',
	procurementTypename:'当日达',
	procurementType: 0,
	close:true,
	imagedr:"https://oss.yyjcpt.com/promotion/5426879aaefe1d10c6874e49e885017e87ab30d94c9777cacaeff058de458777.png?x-oss-process=image/quality,Q_100/format,jpg",
	Imagecr:"https://oss.yyjcpt.com/promotion/80b609a649cc8ba7a4f5ddcf1c740b2f1ce095861fea955ac7cd3c5900390f29.png?x-oss-process=image/quality,Q_100/format,jpg",
	value: 0,
	options: [],	
  });


  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    // 输入框背景色
    elBackground: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 36,
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#b0b3bf',
    },
	
	textClass:{
		type: String,
		default: '#FFFFFF',
		
	},
    // 字体颜色
    fontColor: {
      type: String,
      default: '#b0b3bf',
    },
    // placeholder
    placeholder: {
      type: String,
      default: '这是一个搜索框',
    },
    radius: {
      type: Number,
      default: 10,
    },
    width: {
      type: String,
      default: '100%',
    },
    navbar: {
      type: Boolean,
      default: true,
    },
  });

  // 点击
  // const onclick = () => {
  //   emits('onclick',state.searchVal);
  // };
  // 事件页面
  const emits = defineEmits(['onclick']);
  const onclick = (e) => {
    emits('onclick',state.searchVal)
  }; 

  function onClick(e){
	  
	 // console.log(e)  
	$store('user').procurementType = e.pickupTimeType
	state.procurementType = e.pickupTimeType
	// state.procurementTypename = e.text
	 // console.log(  $store('user').procurementType)
	showLeft.value.close();
  };

  function onSearch(e) {
	  console.log("ddfdf")
	  console.log( state.searchVal)
    if (state.searchVal) {
      sheep.$router.go('/pages/goods/list', { keyword:state.searchVal });
      setTimeout(() => {
        state.searchVal = '';
      }, 100);
    }
  }; 
  // 打开窗口
  	function		showDrawer(e) {
  				showLeft.value.open()
  			};
  
  
 function filterTap() {
  		//显示下拉框
		showLeft.value.open()
		// popup.value.open('center')
  	}; 
  
 // 初始化
 onMounted(async () => {
 	   
 	  const { code,data } = await OrderApi.getOrderconfig();
	  
	    console.log(data)
 	  	  if (code === 0) {  
			  
			  
			  // return
			  console.log(data)
 	  		 state.options =  data.orderConfigs
 	  		  		
 	  	  }
 		  
 });
</script>

<style lang="scss" scoped>
	
	.drawmargin {
		
		margin-top: 200rpx;
	}
  .border-content {
    border: 2rpx solid #eee;
  }
 .dimag {
	 
	 height: 36rpx;
	 width: 154rpx;
	 
 }
  .search-content {
    flex: 1;
    // height: 80rpx;
    position: relative;

    .search-icon {
      font-size: 38rpx;
      margin-right: 20rpx;
    }

    // .keyword-link {
    //   position: absolute;
    //   right: 16rpx;
    //   top: 18rpx;
    // }

    .search-input {
      font-size: 28rpx;
    }
  }
  
  .textClass  {
	  
	  color:#3399FF
  }
</style>
